<template>
  <div class="view-tip">
    <div class="tip-title pull-left">
      {{title}}
    </div>
    <div class="tip-text pull-left">
      <div class="tip-text-wrapper">
        {{text}}
      </div>
    </div>
    <div class="tip-img pull-left">
      <img class="img-umooc" :src="img" alt=""/>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    title: String,
    text: String,
    img: String,
  },
  data() {
    return {}
  },
  created() {

    this.init()
  },

  methods: {
    async init() {

    },
  }
}
</script>


<style scoped>



.view-tip {
  margin-bottom: 0;
  background: linear-gradient(270deg, #ecf0ff, #f0f3ff);
  border-radius: 4px;
  width: 100%;
  height: 100px;
}
.pull-left{
  float: left !important;
}
.tip-title {
  padding-left: 20px;
  padding-right: 26px;
  color: #7691fc;
  position: relative;
  width: 106px;
  line-height: 100px;
  font-size: 30px;
}
.tip-title:before {
  color: #7691fc;
  -webkit-mask: none;
  content: attr(text);
  position: absolute;
}
.tip-text {
  margin-left: -106px;
  margin-right: -178px;
  padding-left: 106px;
  padding-right: 178px;
  color: #666;
  display: table;
  width: 100%;
  height: 100%;
  line-height: 24px
}
.tip-text-wrapper {
  display: table-cell;
  vertical-align: middle;
  white-space: normal;
  word-break: break-all;
}

.tip-img {
  width: 178px;
  line-height: 100px;
  text-align: center;
  border: 0;
  vertical-align: middle;
}

</style>